<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		
		<view v-if="num==0" :style='{ height: mainHeight }'>
			<view class="flex align-center justify-center" style="height: 70%;width: 100%;">
				<view class="padding-bottom-xl">
					<view><image class='avatar-img' src='../../static/img/blank1.png'></image></view>
					<view class="text-center text-sm text-grey"><text >无任何更换历史记录</text></view>
					<view class="text-center padding-top">
						<button @tap="onBack()" class="cu-btn round lg bg-blue">
							<text class="cuIcon-forward"><text class="padding-left-sm">返回</text></text> 
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="num>0">
			<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: mainHeight }' @scrolltoupper="" @scrolltolower="">
				<block v-for="(item, idx) in list" :key="idx">
					<view class="item_panel margin-sm" hover-class="opcity" hover-stay-time="150">
						<view v-if="item.step<7" class="padding-sm flex align-center">
							<view class="flex-treble text-left">
								<text class=" text-icon-size  text-orange text-md padding-left-xs">进行中 {{item.step}}/7</text>
							</view>
							<view class="flex-sub text-right justify-center">
								<view class="">
									<text class="cuIcon-loading2 cuIconfont-spin text-orange"></text>
								</view>
							</view>
						</view>
						<view v-else class="padding-sm flex align-center">
							<view class="flex-treble text-left">
								<text class=" text-icon-size  text-olive text-md padding-left-xs">已完成</text>
							</view>
							<view class="flex-sub text-right justify-center">
								<view class="">
									<!-- <text class="cuIcon-loading2 cuIconfont-spin text-olive"></text> -->
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">场区:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.farmname}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">单元:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.housename}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">栏位:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.hnum}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">异常饲喂器SN:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.old_sn}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">新饲喂器SN:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.new_sn}}
								</view>
							</view>
						</view>
						
						<view class="padding-left padding-bottom padding-right flex align-center text-gray">
							<view class="flex-sub">
								<view class="fl text-xs  text-left">更换原因:</view>
							</view>
							<view class="flex-twice">
								<view class="fr text-xs ">
									{{item.reason}}
								</view>
							</view>
						</view>
													
					</view>
				</block>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
		
				title: '',
				num:-1,
				list:[],
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 20 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 100 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("show feed_node_replace history")
			uni.setNavigationBarTitle({
				title: '更换饲喂器历史'
			});
			this.loadHis()
		},
		methods: {
			onBack(){
				uni.navigateBack()
			},
			loadHis(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				api.myRequest({
					url: '/Api/Device/FeednodeReplace/Page',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						page: 1,
						limit:100,
						unfinished:"",
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
			
						var list = res.data
						console.info(list)
						that.num = list.length
						that.list = list
					} else {
			
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.item_panel {
		min-height: 200rpx;
		border-radius: 5rpx;
		/* background-color: #192654; */
		background-color: rgba(100, 100, 100, 0.3);
	}
</style>
